<template>
	<view style="height: 100%;">
		<!-- 遮罩层 -->
		<view @click="handleClose()" class="mask pay-actionsheet-mask pay-mask-show"></view>
		<!-- 组件内容 -->
		<view class="bg-light fixed-bottom pay-actionsheet rounded-top-lg pay-actionsheet-show">
			<!-- 表头 -->
			<view class="w-100 flex justify-center align-center" style="position: relative; height: 100rpx;">
				<text class="font-lg">选择新的收获地址</text>
				<uni-icons @click="handleClose()" style="position: absolute; right: 20rpx;" type="closeempty" size="25"></uni-icons>
			</view>
			<!-- 中间内容 -->
			<view class="flex flex-column" style="height: calc(100% - 240rpx);" >
				<!-- 原地址展示 -->
				<view class="flex-shrink rounded-lg bg-white mx-3 py-2" >
					<view class="pl-3 pb-2">
						<text class="font font-weight-bold">原地址</text>
					</view>
					<view class="pl-3 flex align-center">
						<text class="font">{{AddressData.Name}}</text>
						<text class="font">{{AddressData.Phone}}</text>
					</view>
					<view class="pl-3">
						<text class="font-sm">配送地址：{{AddressData.Address}}</text>
					</view>
					<view v-if="SalesOrderEdit.quantity>1" class="bg-light mx-3 mt-2 px-3 py-2 rounded-lg flex align-center justify-between">
						<text class="font-sm text-secondary flex-shrink">寄往该地址的商品数量</text>
						<text class="font-sm text-secondary">×{{Quantity}}</text>
					</view>
				</view>
				<!-- 地址列表 -->
				<view class="flex flex-column  mx-3 mt-3" style="height: 100%;">
					<view class="flex-shrink px-3 py-2 rounded-top-lg bg-white flex justify-between">
						<text class="font font-weight-bold">请选择新的收获地址</text>
						<text class="font">添加地址</text>
					</view>
					<scroll-view scroll-y="true" style="height: 440rpx">
						<view class="px-3 bg-white rounded-bottom-lg">
							<!-- 地址渲染 -->
							<view class="py-3" v-for="(item,index) in Address" :key="index">
								<!-- 信息 -->
								<view class="flex">
									<view class="flex-shrink" style="width: 90rpx;">
										<view class="flex justify-center align-center rounded-circle bg-info" style="width: 60rpx; height: 60rpx;">
											<text v-if="true" class="font-sm text-white">{{item.Name.charAt(0)}}</text>
											<uni-icons v-else type="shop" color="#fff" size="20"></uni-icons>
										</view>
									</view>
									<!-- 地址 -->
									<view class="flex w-100">
										<!-- 地址 -->
										<view class="w-100">
											<view class="flex align-center">
												<text class="font">{{item.Name}}</text>
												<text class="font ml-3">{{item.Phone}}</text>
											</view>
											<view>
												<text class="font-sm">配送地址：{{item.Address}}</text>
											</view>
										</view>
										<!-- 选项框 -->
										<view class="flex-shrink flex justify-end align-center" style="width: 90rpx;">
											<uni-icons @click="handleClick(index)" v-if="item.isSelected" type="checkbox-filled" color="#17a2b8" size="30"></uni-icons>
											<uni-icons @click="handleClick(index)" v-else type="circle" color="#17a2b8" size="30"></uni-icons>
										</view>
									</view>
								</view>
								<!-- 计算 -->
								<view v-if="item.isSelected&&SalesOrderEdit.quantity>1" class="bg-light mt-2 py-2 pl-3 rounded-lg flex align-center justify-between" style="margin-left: 90rpx;">
									<text class="font-sm text-secondary flex-shrink">选择寄望该地址的商品数量</text>
									<!-- 计算器 -->
									<counterNum :num="item.Quantity" @Add="handleAdd(index)" @Sub="handleSub(index)"></counterNum>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 底部定位 -->
			<view class="px-3 py-2 fixed-bottom" style="height: 100rpx;">
				<view class="bg-info rounded text-center py-3 text-white font-weight-bold font" @click="submit()"
					hover-class="bg-hover-info" :hover-stay-time="150">确认修改</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import { getAddressList } from '@/api/global.js'
	import { NowTime } from '@/static/js/DateUtil.js'
	import { deepClone } from '@/static/js/GeneralUtil.js'
	import counterNum from '@/components/util/counter.vue'
	export default {
		components:{
			counterNum
		},
		data() {
			return {
				loading: false ,//节流
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
				Domain_IMG:app.globalData.Domain_IMG,//图片路径,
				Address:[{
					Address_SerialNumber:"M02000000000014",
					Address: "黑龙江省绥化市海伦市光华路",
					Name:"袁丙超1",
					Phone:"15046006120",
					isSelected:false,
					Quantity:1,
				},{
					Address_SerialNumber:"M02000000000015",
					Address: "黑龙江省绥化市海伦市光华路",
					Name:"袁丙超2",
					Phone:"15046006120",
					isSelected:false,
					Quantity:1,
				},{
					Address_SerialNumber:"M02000000000016",
					Address: "黑龙江省绥化市海伦市光华路",
					Name:"袁丙超3",
					Phone:"15046006120",
					isSelected:false,
					Quantity:1,
				},{
					Address_SerialNumber:"M02000000000017",
					Address: "黑龙江省绥化市海伦市光华路",
					Name:"袁丙超4",
					Phone:"15046006120",
					isSelected:false,
					Quantity:1,
				},{
					Address_SerialNumber:"M02000000000018",
					Address: "黑龙江省绥化市海伦市光华路",
					Name:"袁丙超5",
					Phone:"15046006120",
					isSelected:false,
					Quantity:1,
				},{
					Address_SerialNumber:"M02000000000012",
					Address: "黑龙江省绥化市海伦市光华路",
					Name:"袁丙超6",
					Phone:"15046006120",
					isSelected:false,
					Quantity:1,
				}],//地址列表
				Quantity:0,
			}
		},
		props: {
			SalesOrderEdit:{//待分配的商品明细
				type:Object,
				default: {}
			},
			AddressData:{//选中的商品原地址
				type:Object,
				default: {}
			},
		},
		methods: {
			handleClose() { //关闭
				this.$emit('Close');
			},
			handleAdd(index){//添加数量
				//判断是否还能拆分
				if(this.Quantity > 0){
					this.Address[index].Quantity++
					this.Quantity--
				}else{
					uni.showToast({
						title: "超出购买数量啦，无法添加",
						icon: "none",
					});
				}
			},
			handleSub(index){//减少数量
				if(this.Address[index].Quantity > 1){
					this.Address[index].Quantity--
					this.Quantity++
				}else{
					uni.showToast({
						title: "数量不能再减少了",
						icon: "none",
					});
				}
			},
			handleClick(index){//选中
				//判断分配数量是否大于1
				if(this.SalesOrderEdit.quantity>1){
					//可分配多地址，多选，计算
					if(!this.Address[index].isSelected){//选中？
						if(this.Quantity > 0){
							this.Quantity--;
							this.Address[index].isSelected = true;
						}else{
							uni.showToast({
								title: "超出购买数量啦，无法添加",
								icon: "none",
							});
						}
					}else{//取消,恢复
						this.Quantity = this.Quantity + this.Address[index].Quantity;
						this.Address[index].Quantity = 1;
						this.Address[index].isSelected = false;
					}
				} else {
					//只能分配一个地址，单选
					if(!this.Address[index].isSelected){//选中？
						for(let i = 0;i < this.Address.length; i++){
							this.Address[i].isSelected = false
						}
						this.Address[index].isSelected = true
					}else{//取消，恢复
						this.Address[index].isSelected = false
					}
				}
			},
			submit(){//提交	
				let lJSONArray = []
				if(this.SalesOrderEdit.quantity>1){//可分配数量
					//原数据处理
					let SalesOrderEdit = deepClone(this.SalesOrderEdit)
					SalesOrderEdit.quantity = this.Quantity
					lJSONArray.push({
						AddressData:this.AddressData,
						GoodsData:[SalesOrderEdit]
					})
					//新数据处理
					if(this.Address.some(item=>item.isSelected)){//获取选中的地址
						let arr = this.Address.filter(item=>item.isSelected)
						arr.forEach(obj=>{
							let newSalesOrderEdit = deepClone(this.SalesOrderEdit)
							newSalesOrderEdit.quantity = obj.Quantity
							lJSONArray.push({
								AddressData:{
									Address_SerialNumber:obj.Address_SerialNumber,
									Address: obj.Address,
									Name:obj.Name,
									Phone:obj.Phone
								},
								GoodsData:[newSalesOrderEdit]
							})
						})
					} else {
						lJSONArray.push({
							AddressData:this.AddressData,
							GoodsData:[this.SalesOrderEdit]
						})
					}
				}else{//单选地址
					//获取有无选中的地址
					if(this.Address.some(item=>item.isSelected)){//获取选中的地址
						let obj = this.Address.filter(item=>item.isSelected)[0]
						lJSONArray.push({
							AddressData:{
								Address_SerialNumber:obj.Address_SerialNumber,
								Address: obj.Address,
								Name:obj.Name,
								Phone:obj.Phone
							},
							GoodsData:[this.SalesOrderEdit]
						})
					} else {
						lJSONArray.push({
							AddressData:this.AddressData,
							GoodsData:[this.SalesOrderEdit]
						})
					}
				}
				//清理掉数量为0的数据
				lJSONArray.forEach(item=>{
					item.GoodsData = item.GoodsData.filter(i=>i.quantity!=0);
				})
				this.$emit('submit',lJSONArray)
			},
			getList(data, onReach = false) { //查询地址
				uni.showLoading({
					title: "查询中",
				});
				uni.request({
					//查询地址列表
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					url: app.globalData.Domain_Name + "/WX2AddressAllAction", //销售价格单
					method: "POST",
					data,
					success: ({
						data
					}) => {
						// if (data.tableData.length == 0) {
						//   this.Add();
						// }
						data.tableData.forEach((item) => {
							item.Address = item.Address + item.Address_Details;
						});
						if (!onReach) {
							this.Address = [];
						}
						this.Address.push(...data.tableData);
						this.total = parseInt(data.limit);
						if (this.total > 10) {
							this.DropdownRow_Status = "下拉查看更多";
						} else {
							this.DropdownRow_Status = "没有更多了";
						}
						let Address = uni.getStorageSync("AddressData");
						this.Address.forEach((item) => {
							item.Default_Type = false;
						});
						if (
							this.Address.some(
								(item) =>
								item.Address_SerialNumber == Address.Address_SerialNumber
							)
						) {
							this.Address.filter(
								(item) =>
								item.Address_SerialNumber == Address.Address_SerialNumber
							);
						}
			
						uni.hideLoading();
					},
				});
			},
		},
		mounted() {
		 	this.Quantity = this.SalesOrderEdit.quantity
		},
	}
</script>

<style lang="scss">
	.pay-actionsheet {
		width: 100%;
		height: 90%;
		visibility: hidden;
		// transform: translate3d(0, 100%, 0);
		// transform-origin: center;
		// transition: all 0.3s ease-in-out;
	}

	.pay-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.pay-actionsheet-mask {
		background: rgba(0, 0, 0, 0.6);
		// transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.pay-mask-show {
		opacity: 1;
		visibility: visible;
	}
	
	.rounded-top-lg {
	  border-top-left-radius: 25rpx;
	  border-top-right-radius: 25rpx;
	}
</style>